<template>
  <div :class="`VPPostList ${isDark ? 'VPPostList_isDark' : ''}`">
    <div class="container-left">
      <ClientOnly>
        <Waterfall
          :list="list"
          :gutter="24"
          :breakpoints="options.breakpoints"
          :crossOrigin="false"
        >
          <template #item="{ item, url, index }">
            <a :href="item.path" target="_blank" rel="noreferrer">
              <div class="post-list-card">
                <!-- <LazyImg :url="url" /> -->
                <img
                  v-if="
                    item.pageData &&
                    item.pageData.frontmatter &&
                    item.pageData.frontmatter.coverImage
                  "
                  :src="item.pageData.frontmatter.coverImage"
                  alt=""
                />
                <img v-else src="./assets/dashizhuanyongtu.jpg" alt="" />
                <div class="title">
                  {{ item.pageData.title || "" }}
                </div>
              </div>
            </a>
          </template>
        </Waterfall>
      </ClientOnly>

      <div class="load-more" v-if="routers.length > list.length">
        <button class="more-btn" @click="handleLoadMore">加载更多</button>
      </div>
    </div>
    <div class="container-right">
      <div class="blogger-wrapper">
        <div class="avatar">
          <img src="./assets/touxiang.jpg" alt="头像" title="我好看吗" />
        </div>
        <div class="text">Hello Word!</div>
        <div class="text-desc">明天会比今天更好！</div>
      </div>
      <div class="categories-wrapper">
        <div class="icon-title">
          <SvgIcon size="22px" name="icon-quanbufenlei" />
          <span>全部分类</span>
        </div>
        <div class="categories-list">
          <a
            v-for="(item, index) in categories"
            :key="index"
            :href="item.path"
            target="_blank"
            rel="noreferrer"
          >
            <div class="categories-items">
              <span class="categories-name">
                {{ item.name }}
              </span>
              <span class="categories-num">
                {{ item.length }}
              </span>
            </div>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="PostList">
import { onMounted, inject, reactive, ref, computed, watch } from "vue";
import { useData, useRouter, defineClientComponent } from "vitepress";
import { RoutersSymbol } from "./constant";
import { a } from "./text";
import "vue-waterfall-plugin-next/dist/style.css";
import SvgIcon from "./SvgIcon.vue";
import { sidebar } from "../setup";
import getCategories from "./categories.ts";
/**
 * img crossOrigin加不加的区别
 * https://energizelab.com/upfile/image/20231025/1698203665_245410.png
 * https://juejin.cn/post/6844903795726483463
 */

const AppData = useData();
const router = useRouter();
const routers = inject(RoutersSymbol);
const props = defineProps({
  type: String,
});
let list = ref([]);
let categories = ref([]);

const pagination = reactive({
  pageSize: 12,
  pageNum: 1,
});
const isDark = ref(false);
watch(
  AppData.isDark,
  (next, prevCount) => {
    isDark.value = next;
  },
  {
    immediate: true,
  }
);
function handleLoadMore() {
  const pageSize = pagination.pageSize + 12;
  list.value = paginateArray(routers, pagination.pageNum, pageSize);
  pagination.pageSize = pageSize;
}
onMounted(() => {
  categories.value = getCategories(sidebar, AppData.site.value.base);
  console.log("routers", { routers, categories, AppData });
  list.value = paginateArray(routers, pagination.pageNum, pagination.pageSize);
});
function paginateArray(array, pageNum, pageSize) {
  const startIndex = (pageNum - 1) * pageSize;
  const endIndex = startIndex + pageSize;
  const page = array.slice(startIndex, endIndex);
  return page;
}

const options = reactive({
  breakpoints: {
    1200: {
      // 当屏幕宽度小于等于1200
      rowPerView: 4,
    },
    800: {
      // 当屏幕宽度小于等于800
      rowPerView: 3,
    },
    500: {
      // 当屏幕宽度小于等于500
      rowPerView: 2,
    },
  },
});
</script>

<style scoped lang="less">
.VPPostList {
  position: relative;
  padding: 0 24px;
  max-width: 1152px;
  margin: 0 auto;
}

.container-left {
  margin-right: 260px;
}

.load-more {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 15px 0;
}

.post-list-card {
  display: block;
  border: 1px solid #f6f6f7;
  border-radius: 12px;
  height: 100%;
  background-color: #f6f6f7;
  transition: border-color 0.25s, background-color 0.25s;
  overflow: hidden;
  &:hover {
    box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.1);
  }
  .title {
    line-height: 24px;
    font-size: 16px;
    font-weight: 600;
    padding: 12px;
  }
}

.more-btn {
  display: inline-block;
  border: 1px solid transparent;
  text-align: center;
  font-weight: 600;
  white-space: nowrap;
  transition: color 0.25s, border-color 0.25s, background-color 0.25s;
  border-radius: 20px;
  padding: 0 20px;
  line-height: 38px;
  font-size: 14px;
  border-color: transparent;
  color: #ffffff;
  background-color: #5672cd;
  &:hover {
    background-color: #3a5ccc;
  }
}

.container-right {
  position: absolute;
  left: calc(100% - 245px - 48px);
  right: 48px;
  top: 24px;
}
.blogger-wrapper {
  width: 100%;
  background-color: #f6f6f7;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  .text {
    line-height: 24px;
    font-size: 16px;
    font-weight: 600;
    padding: 12px;
    text-align: center;
  }
  .text-desc {
    line-height: 22px;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    padding-bottom: 12px;
  }
}

.categories-wrapper {
  width: 100%;
  background-color: #f6f6f7;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;

  .icon-title {
    display: flex;
    align-items: center;
    padding: 12px;
    border-bottom: 1px solid #fff;
    .svg-icon {
      margin-right: 12px;
    }
  }
  .categories-list {
    margin-bottom: 12px;

    a {
      &:nth-child(1) {
        .categories-items {
          padding-top: 12px;
        }
      }
    }
  }

  .categories-items {
    padding: 0 12px;
    display: flex;
    justify-content: space-between;
    line-height: 32px;
    padding-bottom: 12px;

    .categories-name {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin-right: 12px;
    }
    .categories-num {
      background: #fff;
      padding: 12px;
      border-radius: 50%;
      line-height: 8px;
    }
  }
}

.VPPostList_isDark {
  .waterfall-list,
  .post-list-card,
  .blogger-wrapper,
  .categories-wrapper,
  .categories-num 
   {
    background: #000 !important;
  }
  .title,text,.text-desc,.categories-wrapper,.categories-num {
    color: var(--vp-c-text-1);
  }
}

@media (min-width: 640px) {
  .VPPostList {
    padding: 0 48px;
  }
}
@media (max-width: 640px) {
  .container-right {
    display: none;
  }
  .container-left {
    margin-right: 0;
  }
}

@media (min-width: 960px) {
  .VPPostList {
    padding: 0 64px;
  }
  .container-right {
    left: calc(100% - 245px - 64px);
    right: 64px;
  }
}
</style>
